<!-- 当前导航 -->
<div class="current-position">
  <!-- 面包屑 -->
  <nz-breadcrumb class="breadcrumb">
    <nz-breadcrumb-item>首页</nz-breadcrumb-item>
    <nz-breadcrumb-item>app管理</nz-breadcrumb-item>
    <nz-breadcrumb-item>app列表</nz-breadcrumb-item>
  </nz-breadcrumb>
  <h1 class="current-position-title">app列表</h1>
</div>
<!-- 主体内容 -->
<div class="main-content">
  <div style="margin-bottom: 20px;">
    <button nz-button [nzType]="'primary'" (click)="_isVisible = true; _createAppForm.reset();">
      <span>Create App</span>
    </button>
  </div>
  <nz-table #nzTable [nzDataSource]="_appLs" [nzIsPagination]="'false'" [nzScroll]="{ y: 450 }" [nzLoading]="_isDataLoading">
    <ng-template #nzFixedHeader>
      <thead nz-thead>
        <tr>
          <th nz-th [nzWidth]="'24%'">
            <span>AppId</span>
          </th>
          <th nz-th [nzWidth]="'24%'">
            <span>AppName</span>
          </th>
          <th nz-th [nzWidth]="'24%'">
            <span>AppSecret</span>
          </th>
          <th nz-th>
            <span>Action</span>
          </th>
        </tr>
      </thead>
    </ng-template>
    <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of nzTable.data">
        <td nz-td>
          <a [routerLink]="['./app', data.AppId]">{{data.AppId}}</a>
        </td>
        <td nz-td>{{data.AppName}}</td>
        <td nz-td class="copyInput">
          <nz-input [ngModel]="data.AppSecret" #appsecret [nzSize]="'small'" [nzReadonly]="'true'"></nz-input>
        </td>
        <td nz-td>
          <span>
            <a href="javascript:;" (click)="_delete(data.AppId)">Delete</a>
            <span nz-table-divider></span>
            <a href="javascript:;" (click)="_copyAppSecret(appsecret)">Copy AppSecret</a>
            <span nz-table-divider></span>
            <a href="javascript:;" (click)="_upDateAppName(data)">Update</a>
            <span nz-table-divider></span>
            <a href="javascript:;" [routerLink]="['./app', data.AppId]">Configuration</a>
          </span>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<!-- 模态框 新建-->
<nz-modal [nzVisible]="_isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="_handleCancel($event)">
  <ng-template #modalTitle>
    App创建
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="_createAppForm" class="login-form">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label for="AppName" nz-form-item-required>AppName</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="AppName" [nzId]="'AppName'"></nz-input>
          <div nz-form-explain *ngIf="_getFormControl('AppName').dirty&&_getFormControl('AppName').hasError('required')">Please enter AppName!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label for="AppId" nz-form-item-required>AppId</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="AppId" [nzId]="'AppId'"></nz-input>
          <div nz-form-explain *ngIf="_getFormControl('AppId').dirty&&_getFormControl('AppId').hasError('required')">Please enter AppId!</div>
        </div>
      </div>
    </form>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_handleCancel($event)">返 回</button>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_handleOk($event)" [nzLoading]="_isConfirmLoading">提 交</button>
  </ng-template>
</nz-modal>
<!-- 模态框 更新-->
<nz-modal [nzVisible]="_isVisibl_update" [nzTitle]="modalTitle_u" [nzContent]="modalContent_u" [nzFooter]="modalFooter_u" (nzOnCancel)="_handleCancel_update($event)">
  <ng-template #modalTitle_u>
    App创建
  </ng-template>
  <ng-template #modalContent_u>
    <form nz-form [formGroup]="_upDateAppForm" class="login-form">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label for="AppName" nz-form-item-required>AppName</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="AppName" [nzId]="'AppName'"></nz-input>
          <div nz-form-explain *ngIf="_getFormControl_update('AppName').dirty&&_getFormControl_update('AppName').hasError('required')">Please enter AppName!</div>
        </div>
      </div>
    </form>
  </ng-template>
  <ng-template #modalFooter_u>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="_handleCancel_update($event)">返 回</button>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="_handleOk_update($event)" [nzLoading]="_isConfirmLoading">提 交</button>
  </ng-template>
</nz-modal>